Multiple Language Support তৈরি করা

React Native অ্যাপে Multiple Language Support তৈরি করা ব্যবহারকারীদের জন্য একটি গুরুত্বপূর্ণ ফিচার, যা বিভিন্ন ভাষায় অ্যাপের কন্টেন্ট প্রদর্শন করতে সহায়তা করে। এর মাধ্যমে আপনার অ্যাপ্লিকেশন আন্তর্জাতিকভাবে বিস্তৃত হতে পারে এবং ব্যবহারকারীরা তাদের নিজস্ব ভাষায় অ্যাপ ব্যবহার করতে সক্ষম হবে।

এই গাইডে আমরা দেখব কীভাবে React Native অ্যাপে Multiple Language Support যোগ করতে হয়, এবং কিভাবে i18n (Internationalization) এবং L10n (Localization) ব্যবহার করা যায়।

Step 1: Install Dependencies

React Native-এ multiple language support পরিচালনা করতে সাধারণত react-i18next এবং i18next লাইব্রেরি ব্যবহার করা হয়। এটি ব্যবহারের মাধ্যমে বিভিন্ন ভাষায় কনটেন্ট লোড করা এবং সুইচ করা সম্ভব হয়।

1. React Native প্রজেক্টে i18next এবং react-i18next ইনস্টল করুন:

npm install i18next react-i18next

2. কিছু অতিরিক্ত dependency ইনস্টল করতে হবে (যেমন react-native-localize যদি আপনি লোকালাইজেশন ব্যবহার করতে চান):

npm install react-native-localize

Step 2: Set Up i18next Configuration

i18next লাইব্রেরি কনফিগার করে আপনি বিভিন্ন ভাষায় কনটেন্ট লোড এবং সুইচ করতে পারবেন। এখানে একটি সহজ কনফিগারেশন উদাহরণ দেওয়া হলো।

1. i18n.js ফাইল তৈরি করুন এবং নিম্নলিখিত কোড যোগ করুন:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { I18nManager } from 'react-native';
import en from './locales/en.json';
import bn from './locales/bn.json';

// i18next কনফিগারেশন
i18n
  .use(initReactI18next) // react-i18next এর সাথে সংযোগ
  .init({
    resources: {
      en: { translation: en }, // ইংরেজি ভাষার কনটেন্ট
      bn: { translation: bn }, // বাংলা ভাষার কনটেন্ট
    },
    lng: 'en', // ডিফল্ট ভাষা
    fallbackLng: 'en', // ভাষা না পেলে ডিফল্ট ভাষা
    interpolation: {
      escapeValue: false, // React already escapes variables
    },
  });

// বাংলা ভাষা ডিরেক্টিভসের জন্য
I18nManager.allowRTL(false); // Right-to-left ভাষা নিষ্ক্রিয় করা

export default i18n;

এখানে en.json এবং bn.json ফাইলের মধ্যে ভাষা-specific কনটেন্ট থাকবে, এবং এটি কনফিগারেশনের মাধ্যমে লোড করা হবে।

Step 3: Create Language JSON Files

আপনার প্রতিটি ভাষার জন্য একটি JSON ফাইল তৈরি করতে হবে যেখানে আপনি সব স্ট্যাটিক কনটেন্ট রাখবেন। যেমন en.json এবং bn.json ফাইল দুটি তৈরি করুন।

1. locales/en.json (ইংরেজি কনটেন্ট):

{
  "welcome": "Welcome to the App",
  "login": "Login",
  "signup": "Sign Up"
}

2. locales/bn.json (বাংলা কনটেন্ট):

{
  "welcome": "অ্যাপসে স্বাগতম",
  "login": "লগইন",
  "signup": "সাইন আপ"
}

এই ফাইলগুলির মধ্যে আপনি অ্যাপের সকল স্ট্যাটিক কনটেন্ট রেখে দেবেন।

Step 4: Using i18next in Components

এখন, আপনি React Native কম্পোনেন্টে i18next এর মাধ্যমে ভাষা পরিবর্তন এবং কনটেন্ট প্রদর্শন করতে পারবেন।

1. App.js ফাইলে useTranslation হুক ব্যবহার করে কিভাবে ভাষা পরিবর্তন এবং কনটেন্ট ব্যবহার করতে হবে তা দেখানো হলো:

import React, { useState } from 'react';
import { View, Text, Button, TouchableOpacity } from 'react-native';
import { useTranslation } from 'react-i18next';

const App = () => {
  const { t, i18n } = useTranslation();
  const [language, setLanguage] = useState('en');

  const changeLanguage = (lang) => {
    i18n.changeLanguage(lang); // ভাষা পরিবর্তন
    setLanguage(lang);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>{t('welcome')}</Text> {/* Translation here */}
      
      <Button title={t('login')} onPress={() => {}} />
      <Button title={t('signup')} onPress={() => {}} />

      <TouchableOpacity onPress={() => changeLanguage('en')}>
        <Text>Switch to English</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => changeLanguage('bn')}>
        <Text>বাংলা ভাষায় যান</Text>
      </TouchableOpacity>
    </View>
  );
};

export default App;

Explanation:

• useTranslation() হুকটি ব্যবহার করে ভাষার কনটেন্ট লোড করা হচ্ছে।
• t() ফাংশন দিয়ে প্রতিটি স্ট্যাটিক টেক্সট যেমন welcome, login, signup প্রদর্শন করা হচ্ছে।
• ভাষা পরিবর্তনের জন্য changeLanguage ফাংশন ব্যবহার করা হয়েছে, যা ব্যবহারকারীকে ইংরেজি বা বাংলা ভাষায় সুইচ করার সুযোগ দেয়।

Step 5: Set Up Language Switching UI

আপনি ব্যবহারকারীদের জন্য একটি UI তৈরি করতে পারেন যেখানে তারা তাদের পছন্দসই ভাষা বেছে নিতে পারে। উপরোক্ত উদাহরণে দুটি বাটন ব্যবহার করে English এবং Bangla ভাষা পরিবর্তন করার অপশন দেয়া হয়েছে।

এটি ব্যবহারকারীকে সহজে ভাষা পরিবর্তনের সুবিধা দেবে।

Step 6: Handling RTL Languages

যদি আপনার অ্যাপটি Right-to-Left (RTL) ভাষা যেমন আরবি বা হিব্রু সমর্থন করে, তাহলে i18n কনফিগারেশনে RTL সাপোর্টও যুক্ত করতে পারেন।

import { I18nManager } from 'react-native';

const changeLanguage = (lang) => {
  i18n.changeLanguage(lang);
  if (lang === 'ar') {
    I18nManager.forceRTL(true);
  } else {
    I18nManager.forceRTL(false);
  }
};

এটি RTL ভাষার জন্য নেভিগেশন এবং UI কম্পোনেন্টগুলোকে সঠিকভাবে উপস্থাপন করতে সাহায্য করবে।

Step 7: Testing the Language Switch

অ্যাপের মধ্যে ভাষা পরিবর্তন ফিচার সফলভাবে কাজ করতে, আপনাকে অ্যাপটি রান করে দেখে নিশ্চিত হতে হবে যে, প্রতিটি ভাষায় কনটেন্ট সঠিকভাবে প্রদর্শিত হচ্ছে এবং ভাষা পরিবর্তন করা গেলে UI সঠিকভাবে আপডেট হচ্ছে।

Conclusion

এইভাবে আপনি React Native অ্যাপে Multiple Language Support যোগ করতে পারেন। এখানে আমরা react-i18next ব্যবহার করেছি, যা React Native অ্যাপে ভাষা পরিবর্তন, কনটেন্ট অনুবাদ এবং স্থানীয়করণ (Localization) সহজ করে তোলে। আপনি JSON ফাইল ব্যবহার করে প্রতিটি ভাষার কনটেন্ট সংরক্ষণ করতে পারেন এবং ব্যবহারকারীর ভাষা পরিবর্তন করার মাধ্যমে অ্যাপের ভাষা পরিবর্তন করতে সক্ষম হবেন।

এছাড়া, RTL ভাষা সমর্থনও সহজেই ইন্টিগ্রেট করা যায়।